{% extends 'index.html' %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-wrench  "></i> 用户管理中心</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                           	<i class="fa   fa-gear"></i> 用户管理
                        </div>
                        <div class="panel-body">

				                            
				           <ul class="nav nav-tabs">
				              <li class="active"><a href="#home" data-toggle="tab"><i class="fa   fa-user"></i> 用户</a>
				              </li>
				              <li><a href="#profile" data-toggle="tab"><i class="fa   fa-group"></i>用户组</a>
				              </li>
				           </ul>
				
				                            
				           <div class="tab-content">
				              <div class="tab-pane fade in active" id="home">
				                   <div class="row">
				                   		<div class="col-lg-12">
				                   			<br>
				                   			<legend><i class="fa  fa-list-alt  "></i>用户列表</legend>																					
											<div>											
												<table class="table table-hover">
													<thead>
														<tr>
															<th class="center">用户名称</th>
															<th class="center">邮箱地址</th>
															<th class="hidden-xs center">超级管理员</th>
															<th class="hidden-480 center">最后登录</th>
															<th class="center">注册日期</th>
															<th class="center">是否激活</th>
															<th class="center">操作</th>
														</tr>
													</thead>
										
													<tbody>
														{% for ds in userList %}
															<tr>
																<td>
																	<label>
																		<span class="lbl"></span>
																		<a href="/user/{{ds.id}}">
																			{{ ds.username }}
																		</a>
																	</label>
																</td>		
																<td>
																	{{ ds.email }}
																</td>																
																<td class="hidden-480">	
																	{% if ds.is_superuser %}
																		<span class="label label-success arrowed">
																			是
																		</span>
																	{% else %}
																		<span class="label label-danger arrowed-in">
																			否
																		</span>												
																	{% endif %}														
																</td>																
																<td>
																	{{ ds.last_login|date:"Y/m/d H:i:s" }}
																	
																</td>
																<td class="hidden-480">
																	{{ ds.date_joined|date:"Y/m/d H:i:s" }}														
																	
																</td>
																<td class="hidden-480">	
																	{% if ds.is_active %}
																		<span class="label label-success arrowed">
																			已激活
																		</span>
																	{% else %}
																		<span class="label label-danger arrowed-in">
																			未激活
																		</span>												
																	{% endif %}														
																</td>
																<td>
																	<div class="btn-group-vertical">
																		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
																			<abbr title="用户控制"><i class="fa fa-edit"></i>
																			<span class="caret"></span>
																		</button>
																		<ul class="dropdown-menu">
																				<li>
																					{% if ds.is_active %}
																						<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',0,'inactive')">取消激活</a>
																					{% else %}
																						<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',1,'active')">激活用户</a>
																					{% endif %}																
																				</li>																																	
																				<li class="divider"></li>					
																				<li>
																					<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',0,'delete')">删除用户</a>
																				</li>														
																		</ul>
																	</div>																	
																</td>		
															</tr>
														{% endfor %}
														</tbody>
													</table>
												</div>													
													<div class="hr "></div>
										
													<div class="row">
														<div class="col-sm-5 pull-right">
															<h4 class="pull-right">
																Total Users :
																<span class="red"><code>{{ userList|length }}</code></span>
															</h4>
														</div>
														<div class="col-sm-7 pull-left"> 
															<button class="btn btn-sm btn-default pull-left" class="btn btn-primary" data-toggle="modal"  data-target="#myAddUserModal">
																<i class="fa fa-plus"></i>
																<span class="bigger-110">新增用户</span>
															</button>
														</div>
															
													</div>				                   		
				                   		</div>

				                   </div>
				              </div>
				              <div class="tab-pane fade" id="profile">
				                   <div class="row">
				                   		<div class="col-lg-12">
				                   			<br>
				                   			<legend><i class="fa  fa-list-alt  "></i>用户组列表</legend>																					
											<div>											
												<table class="table table-hover">
													<thead>
														<tr>
															<th class="center">id</th>
															<th class="center">组名</th>
															<th class="text-center">操作</th>
														</tr>
													</thead>
										
													<tbody>
														{% for ds in groupList %}
															<tr>
																<td>
																	<label>
																		<span class="lbl"></span>
																		<a href="/group/{{ds.id}}">
																			{{ ds.id }}
																		</a>
																	</label>
																</td>		
																<td>
																	{{ ds.name }}
																</td>																
																<td class="text-center">
																	<a href="/group/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="编辑"><i class="glyphicon glyphicon-edit"></i></button></a>
	                                            					<button  type="button" class="btn btn-default" onclick="delGroupData(this,'group',{{ds.id}})"><abbr title="删除"><i class="glyphicon glyphicon-trash"></i></button>																	
																</td>		
															</tr>
														{% endfor %}
														</tbody>
													</table>
												</div>													
													<div class="hr "></div>
										
													<div class="row">
														<div class="col-sm-5 pull-right">
															<h4 class="pull-right">
																Total Groups :
																<span class="red"><code>{{ groupList|length }}</code></span>
															</h4>
														</div>
														<div class="col-sm-7 pull-left"> 
															<button class="btn btn-sm btn-default pull-left" class="btn btn-primary" data-toggle="modal"  data-target="#myGroupModal">
																<i class="fa fa-plus"></i>
																<span class="bigger-110">新增用户组</span>
															</button>
														</div>
															
													</div>				                   		
				                   		</div>

				                   </div>
				              </div>
				           </div>


                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>    
</div>

			<div class="modal fade" id="myAddUserModal" tabindex="-1" role="dialog" aria-labelledby="myAddUserModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myAddUserModalLabel">
								新增用户
							</h4>
						</div>
						<div class="modal-body">
							<form id="register" class="main form-horizontal">
								<fieldset>
									<div class="form-group">
										<label class="col-sm-2 control-label"><i class="fa fa-user"></i></label>
										<div class="col-sm-6">
											<input type="text" class="form-control" placeholder="Username" name="username" required/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label"><i class="fa fa-envelope"></i></label>
										<div class="col-sm-6">
											<input type="email" class="form-control" placeholder="Email" name="email" required/>
										</div>
									</div>									

									<div class="form-group">
										<label class="col-sm-2 control-label"><i class="fa fa-lock"></i></label>
										<div class="col-sm-6">
											<input type="password" class="form-control" placeholder="Password" name="password" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label"><i class="fa fa-retweet"></i></label>
										<div class="col-sm-6">
											<input type="password" class="form-control" placeholder="Repeat password" name="c_password"/>
										</div>
									</div>									


										<div class="space-24"></div>
										
								</fieldset>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" onclick="userRegister(this)">
								添加
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>	

			<div class="modal fade" id="myGroupModal" tabindex="-1" role="dialog" aria-labelledby="myGroupModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myGroupModalLabel">
								添加用户组
							</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" role="form" id="group_assets">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>组名</strong></label>																												
									<div class="col-sm-6">
										<input class="form-control" type="text" name="name" />	
									</div>											
								</div>									
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" onclick="addGroupData(this)">
								添加
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

<script type="text/javascript">

		function addGroupData(obj,op) {
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			var post_data = {}; 
			var putUrl = '/api/group/';
			var form = document.getElementById('group_assets');
			for (var i = 0; i < form.length; ++i) {
				var name = form[i].name;
				var value = form[i].value;
				if ( value.length == 0){
					window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
					return false;
				}
				
			};
			post_data[name] = value;
			$.ajax({
				dataType: "JSON",
				url:putUrl, //请求地址
				type:"POST",  //提交类似
				data:post_data, //提交参数
				success:function(response){
					btnObj.removeAttr('disabled');
					window.wxc.xcConfirm("用户组添加成功", window.wxc.xcConfirm.typeEnum.success);
					location.reload();
				},
		    	error:function(response){
		    		btnObj.removeAttr('disabled');
		    		window.wxc.xcConfirm("用户组添加失败", window.wxc.xcConfirm.typeEnum.error);
		    		location.reload();
		    	}
			})	
		}

		
		function  modfGroupData(obj,op,id){
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			var post_data = {}; 		
			window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input,{
				onOk:function(result){
					if (result.length == 0){
						/* 如果没有输入字符串则直接退出 */
						return;
					};
					if (op=="service"){
						var putUrl = '/api/service/' + id +'/';
						post_data['service_name'] = result;
					}
					else if (op=="group"){
						var putUrl = '/api/group/'+ id +'/';
						post_data['name'] = result;
					}
					else if (op=="zone"){
						var putUrl = '/api/zone/'+ id +'/';
						post_data['zone_name'] = result;
					}		
					else if (op=="line"){
						var putUrl = '/api/line/'+ id +'/';
						post_data['line_name'] = result;
					}	
					else if (op=="raid"){
						var putUrl = '/api/raid/'+ id +'/';
						post_data['raid_name'] = result;
					}		
					else if (op=="status"){
						var putUrl = '/api/status/'+ id +'/';
						post_data['status_name'] = result;
					};				
					$.ajax({
						  type: 'PUT',
						  url: putUrl,
						  data:post_data,
					      success:function(response){	
					    	  btnObj.removeAttr('disabled');
				              window.wxc.xcConfirm("修改成功", window.wxc.xcConfirm.typeEnum.success);	
				              location.reload();
						},
			            error:function(response){
			            	btnObj.removeAttr('disabled');
			            	window.wxc.xcConfirm("修改失败！", window.wxc.xcConfirm.typeEnum.error);
			            	location.reload();
			            },							  
						});
					
				}
			});								   
	   }
		
		function delGroupData(obj,op,id) {
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			var post_data = {}; 
			if (op=="service"){
				var putUrl = '/api/service/'+ id + '/';
			}
			else if (op=="group"){
				var putUrl = '/api/group/' + id + '/';
			}
			else if (op=="zone"){
				var putUrl = '/api/zone/' + id + '/';
			}		
			else if (op=="line"){
				var putUrl = '/api/line/' + id + '/';
			}	
			else if (op=="raid"){
				var putUrl = '/api/raid/' + id + '/';
			}		
			else if (op=="status"){
				var putUrl = '/api/status/' + id + '/';
			}			
			$.ajax({
				dataType: "JSON",
				url:putUrl, //请求地址
				type:"DELETE",  //提交参数
				success:function(response){
					btnObj.removeAttr('disabled');
					window.wxc.xcConfirm("资产删除成功", window.wxc.xcConfirm.typeEnum.success);
					location.reload();
					
				},
		    	error:function(response){
		    		btnObj.removeAttr('disabled');
		    		window.wxc.xcConfirm("资产删除失败~", window.wxc.xcConfirm.typeEnum.error);
		    	    location.reload();
		    	}
			})	
		}		
		
		function userRegister(obj) {
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			var required = ['email','username','password','c_password'];
			var server_data = {};
			var form = document.getElementById('register');
			for (var i = 1; i < form.length; ++i) {
				var name = form[i].name;
				var value = form[i].value;	
				idx = $.inArray(name, required);	
				if (idx >= 0 && value.length == 0){
					window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
					btnObj.removeAttr('disabled');
					return false;
				}
				else if(  value.length != 0 && name.length != 0 ){
					server_data[name] = value;
				}			
			};			
			$.ajax({
				dataType: "JSON",
				url:'/register/', //请求地址
				type:"POST",  //提交类似
				data:server_data,  //提交参数
				success:function(response){
					btnObj.removeAttr('disabled');
					if (response["code"] == 200){
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						location.reload();
					}
					else {
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					}
					
				},
		    	error:function(response){
		    		btnObj.removeAttr('disabled');
		    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
		    	}
			})	
		}
		
		function onBtnHandleUser(obj, id,user,status,op){
			var post_data = {};
			var post_type = "PUT";
			var btnObj = $(obj);
			if ( op == 'active'){
				var txt=  "是否确认激活？"
				post_data['is_active'] = status;
			}
			else if ( op == 'inactive'){
				var txt=  "是否取消激活用户？"
				post_data['is_active'] = status;
			}
			else if( op == 'superuser' ){
				var txt=  "是否确认授权为超级管理员？"
				post_data['is_superuser'] = status;
			}
			else if( op == 'dissuperuser' ){
				var txt=  "是否确认取消超级管理员权限？"
				post_data['is_superuser'] = status;
			}
			else if( op == 'delete' ){
				var txt=  "是否确认删除用户？"
				var post_type = "DELETE";
			};		
			post_data['username'] = user;
			var option = {
					title: "操作用户("+user+")",
					btn: parseInt("0011",2),
					onOk: function(){
						$.ajax({
							  type: post_type,
							  url: '/api/user/'+id+'/',
							  data:post_data,
						      success:function(response){			            
					               window.wxc.xcConfirm("用户资料更新成功", window.wxc.xcConfirm.typeEnum.success);
					                
							},
				            error:function(response){
				            	window.wxc.xcConfirm("用户资料更新失败", window.wxc.xcConfirm.typeEnum.error);
				            },		
							});
					},
					onCancel:function(){	
					},
					onClose:function(){
					}
				}			
			window.wxc.xcConfirm(txt, "custom", option);
	}	  
</script>

{% endblock %}